<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr />
    <button @click="changeUserInfo">修改用户资料</button>
    <div style="border:1px solid red; margin: 20px; padding: 15px">
      vuex取值---ppp: {{ userInfo }}
      $store取值：{{ $store.state.userInfo }}
    </div>
    <Father></Father>
    <hr/>
    <qrCode></qrCode>

  </div>
</template>

<script>
import Father from './Father.vue'
import qrCode from './qrCode.vue'
// 获取vuex的数据
import { mapState } from 'vuex'
export default {
  components: { 
    Father,
    qrCode
  },
  computed:{
    ...mapState(['userInfo']),
  },
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    changeUserInfo(){
      let person = {
        name: 'davide',
        sex: '男'
      }
      // 修改vuex的数据
      this.$store.commit('setUserInfo', person)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
